<template>
	<view class="box-shopList">
		<view class="search">
			<u-icon name="arrow-leftward" class="arrow-leftward" @click="back"></u-icon>
			<u-search placeholder="请输入名称" :searchIconSize="30" :actionStyle="actionStyle" 
			:height="70" v-model="keyword"></u-search>
		</view>
		<view class="content">
			<view class="select-area">
				<view class="title">商品列表</view>
				<view class="filter" @click="openFilterModel">
					<text>筛选条件</text>
					<u-icon name="search" class="icon-search" size="40"></u-icon>
				</view>
			</view>
			<view class="shop-list">
				<view v-for="(item, index) in 10" :key="index" class="item" @click="shopClick(item)">
					<u--image class="shop-img" src="https://cdn.uviewui.com/uview/album/1.jpg" 
					radius="20rpx" width="340rpx" height="300rpx"></u--image>
					<view class="infos">
						<view class="s-title">
							关键字/关键字/关键字/关键字/关键字/键字/关键字/关键字/关键字/关键字/关键字/关键字/关键字/关键字/键字/关键字/关键字/关键字/关键字/关键字/关键字/关键字/关键字/
						</view>
						<view class="area-server">
							区服: 电信一区
						</view>
					</view>
				</view>
			</view>
		</view>
		<ccRightPopup :pop-show="popShow" :colors="colors" :classList="classList" 
		@sureClick="sureClick" @hideClick="hideright"></ccRightPopup> 
	</view>
</template>

<script>
	import ccRightPopup from './components/cc-rightPopup.vue'
	export default {
		components:{
			ccRightPopup
		},
		data() {
			return {
				keyword: '',
				actionStyle: {
					marginLeft: '2rpx',
					fontSize: '40rpx',
					color: '#ffb82f',
					width: '100rpx'
				},
				shopList: [
					
				],
				colors: '#ffb82f',
				popShow: false,
				classList: [{
					name: '营业事件',
					id: 1,
					child: [{
						name: '0-5时',
						id: 10,
						current: true
					}, {
						name: '5-10时',
						id: 11,
						current: false

					}]
				}, {
					name: '用餐人数',
					id: 2,
					child: [{
							name: '单人餐',
							id: 20,
							current: false

						}, {
							name: '双人餐',
							id: 21,
							current: false

						}
					]
				}]
			}
		},
		onShow(){
		},
		methods: {
			// 商品点击
			shopClick() {},
			// 筛选确认 
			sureClick(paramDict, selArr) {
					this.popShow = false;
					uni.showModal({
						title: '筛选数据',
						content: ' 筛选按钮数据= ' + JSON.stringify(selArr)
						// content: '筛选价格数据 = ' + JSON.stringify(paramDict) + ' 筛选按钮数据= ' + JSON.stringify(selArr)
					})
			},
			// 隐藏处理
			hideright() {
				this.popShow = false;
			},
			// 打开筛选弹窗
			openFilterModel() {
				console.log('筛选')
				this.popShow = true
			},
			back(){
				console.log('返回')
				uni.navigateBack()
			}
		},
		onReady() {
		}
	}
</script>

<style scoped lang="scss">
	.box-shopList{
		padding: 30rpx;
		.search{
			display: flex;
			.arrow-leftward{
				padding-right: 20rpx;
				color: #333;
			}
		}
		.content{
			.select-area{
				padding: 30rpx;
				display: flex;
				justify-content: space-between;
				.title{
					font-weight: 700;
				}
				.filter{
					display: flex;
					.icon-search{
						color: #333;
					}
				}
			}
			.shop-list{
				.item{
					display: flex;
					justify-content: space-between;
					margin-bottom: 30rpx;
					border-bottom: 1px solid #e5e5e5;
					padding: 0 30rpx 30rpx;
					.shop-img{
						margin-right: 20rpx;
					}
					.infos{
						position: relative;
						.s-title{
							font-size: 28rpx;
							word-break: break-all;
							text-overflow: ellipsis;
							overflow: hidden;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 6;
						}
						.area-server{
							position: absolute;
							bottom: 0;
							color: #666;
						}
					}
				}
			}
		}
	}
</style>